<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客服页面</title>
</head>

<body>
    <div id="app">
        <template v-if="this.step === 'link-server'">
            <input v-model="userId" placeholder="请输入您的id" />
            <button @click="init">连接服务器</button>
        </template>

        <template v-if="this.step === 'link-hotel'">
            <input v-model="hotelId" placeholder="请输入你要联系的酒店客服id" />
            <button @click="linkHotelId">连接好友</button>
        </template>

        <template v-if="this.step === 'OK'">
            <input v-model="message" placeholder="请输入你要发送的内容" />
            <button @click="send">发送</button>
            <button @click="cleanMsgList">清屏</button>
        </template>
        <ul>
            <li v-for="msg in messageList">
                {{msg}}
            </li>
            <br>
            <li v-for="hmsg in messageHotelList">
                {{hmsg}}
            </li>
        </ul>

        <!---->
        <div>

        </div>
    </div>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../../js/untils/axios-0.18.0.js"></script>
    <script src="../../js/untils/index.js"></script>
    <script src="../../js/untils/vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    userId: '', // 用户
                    hotelId: '', // 酒店客服
                    webSocat: {},
                    message: '', // 消息
                    messageList: [], // 我发送的消息集合
                    messageHotelList: [], // 酒店段消息集合
                    step: 'link-server',
                }
            },
            methods: {
                //////////////////////////////////////////////////////////////////////////////////////////////////
                // websocket
                init() {
                    if (typeof (WebSocket) === "undefined") alert("您的浏览器不支持websocket")
                    else {
                        // debugger
                        this.step = 'link-hotel'
                        var userId = this.userId
                        // 实例化socket
                        this.webSocat = new WebSocket("ws://192.168.186.242:8090/WebSocaketServer/" + userId)
                        // console.log(this.socat)
                        // 监听socket连接
                        this.webSocat.onopen = this.open
                        // 监听socket错误信息
                        this.webSocat.onerror = this.error
                        // 监听socket消息
                        this.webSocat.onmessage = this.getMessage
                    }
                },

                // 清空聊天记录
                cleanMsgList() {
                    this.messageList = []
                    this.messageHotelList = []
                },

                linkHotelId() {
                    this.step = 'OK'
                    // debugger
                    this.webSocat.send(this.hotelId)
                },

                open() {
                    alert("socket连接成功")
                },

                error() {
                    alert("连接错误")
                },

                // 监听消息
                onmessage(event) {
                    console.log(event)
                    this.messageList.push(event.data)
                },

                // 得到消息
                getMessage(msg) {
                    console.log(msg.data)
                    this.messageHotelList.push(msg.data)
                },

                // 发送消息
                send() {
                    this.messageList.push("我:" + this.message)
                    this.webSocat.send(this.message)
                    // this.socket.send(params)
                },

                // 关闭
                close: function () {
                    alert("socket已经关闭")
                },

                /////////////////////////////////////////////////////////////////////////////////////////////////
            },

            // 页面加载前
            created() {
                console.log(JSON.parse(window.localStorage.getItem("access-admin")))
            },
            // 页面加载后
            mounted() {
                // this.user = window.localStorage.getItem("access-admin")

                // this.init()
            },
            // 销毁后
            destroyed() {

            },
        })
    </script>
</body>

</html>